<template>
  <!-- 修改密码 -->
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <form>
      <validation-observer ref="observer" v-slot="{ validate }">
        <div class="layui-form-item">
          <validation-provider name="oldpassword" rules="required|min:6|max:16" v-slot="{errors}">
            <div class="layui-row">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" v-model="oldpassword" class="layui-input" />
              </div>
            </div>
            <div class="layui-row">
              <span style="color: #c00;">{{errors[0]}}</span>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <validation-provider
            name="password"
            rules="required|min:6|max:16|confirmed:confirmation"
            v-slot="{errors}"
          >
            <div class="layui-row">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" v-model="password" class="layui-input" />
              </div>
              <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-row">
              <span style="color: #c00;">{{errors[0]}}</span>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <validation-provider v-slot="{ errors }" vid="confirmation">
            <div class="layui-row">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" v-model="repassword" class="layui-input" />
              </div>
            </div>
            <div class="layui-row">
              <span style="color: #c00;">{{errors[0]}}</span>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" @click="validate().then(submit)">确认修改</button>
        </div>
      </validation-observer>
    </form>
  </div>
</template>
<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate';
import { updateUserInfo } from '@/api/user';

export default {
  name: 'MyInfo',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data () {
    return {
      sex: '',
      username: '',
      email: '',
      location: '',
      regmark: ''
    };
  },
  methods: {
    choose (value) {
      this.sex = value;
    },
    submit () {
      updateUserInfo({
        username: this.username,
        email: this.email,
        location: this.location,
        gender: this.sex,
        regmark: this.regmark
      }).then(res => {
        if (res.code === 200) {
          this.$alert(res.msg);
          this.$store.commit('setUserInfo', {
            ...this.$store.state.userInfo,
            ...res.data
          });
        } else this.$alert(res.msg);
      });
    }
  },
  mounted () {
    let { username, email, location, gender, regmark } = this.$store.state.userInfo;
    this.email = email || '';
    this.username = username || '';
    this.location = location || '';
    this.sex = gender || '';
    this.regmark = regmark || '';
  }
};
</script>
<style scoped lang="scss">
.sexItem {
  padding: 8px 15px;

  .layui-form input[type=radio] {
    display: inline-block;
  }
  .layui-icon-circle {
    margin-left: 2px;
    cursor: pointer;
  }
  .layui-icon-radio {
    color: #009688;
  }
  .female {
    margin-left: 8px;
  }
}
</style>
